<template>
  <view class="page-container">
    <S1Header title="金额取整配置" :on-back="goBack" />

    <view class="content-wrapper">
      <view class="config-list">
        <view
          v-for="item in priceSetList"
          :key="item.val"
          class="config-item"
        >
          <view class="item-left">
            <text class="item-label">
              {{ item.name }}：
            </text>
          </view>
          <view class="item-right">
            <radio-group @change="(e) => onRadioChange(e, item)">
              <label
                v-for="option in item.set"
                :key="option.val"
                class="radio-label"
              >
                <radio
                  :value="option.val"
                  :checked="item.value === option.val"
                  color="#4ca75b"
                />
                <text class="radio-text">{{ option.label }}</text>
              </label>
            </radio-group>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import S1Header from '@/components/S1Header.vue';
import { get, post } from '@/utils/request';

interface PriceOption {
  val: string;
  label: string;
}

interface PriceSetItem {
  val: string;
  name: string;
  value: string;
  set: PriceOption[];
}

defineOptions({ name: 'PriceRounding' });

const priceSetList = ref<PriceSetItem[]>([]);

const goBack = () => {
  uni.navigateBack();
};

// 获取金额取整配置
const getZeroType = async () => {
  try {
    const res: any = await get('/syapi/config/zerotype');
    if (res.code === 200) {
      priceSetList.value = res.data;
    }
  }
  catch (error) {
    console.error('获取金额取整配置失败:', error);
  }
};

// 保存金额取整配置
const saveZeroType = async (item: PriceSetItem) => {
  try {
    const res: any = await post('/syapi/config/zerotypesave', { data: item });
    if (res.code === 200) {
      uni.showToast({
        title: '保存成功',
        icon: 'success',
      });
    }
    else {
      uni.showToast({
        title: res.msg || '保存失败',
        icon: 'none',
      });
    }
  }
  catch (error) {
    console.error('保存失败:', error);
    uni.showToast({
      title: '保存失败',
      icon: 'none',
    });
  }
};

// 单选框变化
const onRadioChange = (e: any, item: PriceSetItem) => {
  const value = e.detail.value;
  // 更新当前配置项的值
  item.value = value;
  // 保存配置
  saveZeroType(item);
};

onMounted(() => {
  getZeroType();
});
</script>

<style scoped lang="scss">
.page-container {
  min-height: 100vh;
  background-color: #f8f8f8;
}

.content-wrapper {
  padding: 20rpx 32rpx;
}

.config-list {
  background-color: #fff;
  border-radius: 12rpx;
  overflow: hidden;
}

.config-item {
  padding: 30rpx 60rpx;
  border-bottom: 1rpx solid rgba(0, 0, 0, 0.06);

  &:last-child {
    border-bottom: none;
  }
}

.item-left {
  margin-bottom: 20rpx;
}

.item-label {
  font-size: 30rpx;
  color: #333;
  font-weight: 500;
}

.item-right {
  radio-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
}

.radio-label {
  display: flex;
  align-items: center;
  width: 48%;
  margin-bottom: 20rpx;

  &:nth-child(odd) {
    justify-content: flex-start;
  }

  &:nth-child(even) {
    justify-content: flex-end;
  }
}

.radio-text {
  margin-left: 10rpx;
  font-size: 28rpx;
  color: #666;
}
</style>
